 <template>
  <!-- 清洗记录详情 -->
  <view class="rinseDetail">
    <view class="wrapper">
      <view class="wrapper-item">
        <u-form
          :model="form"
          ref="form"
          label-width="280"
          labelPosition="’top‘"
          :error-type="errorType"
        >
          <u-form-item label="餐厅" borderBottom>
            <view class="conView">{{ form.restaurantName }}</view>
          </u-form-item>
          <u-form-item label="清洗厂商" borderBottom>
            <view class="conView">{{ form.serviceProvider }}</view>
          </u-form-item>
          <u-form-item label="清洗联系电话" borderBottom>
            <view class="conView">{{ form.contactsPhone }}</view>
          </u-form-item>
          <u-form-item label="清洗时间" borderBottom>
            <view class="conView">{{ form.cleanTime }}</view>
          </u-form-item>
          <u-form-item label="备注信息" border="none" v-if="form.situation">
            <view class="conView wordBreak">{{ form.situation }}</view>
          </u-form-item>
          <u-form-item
            label="净化设备现场清洗照片"
            border="none"
            v-if="scale != 1"
          >
            <view
              class="photo-class"
              :class="purifyImageList.length <= 2 ? 'photoAfter' : ''"
            >
              <image
                :src="item"
                v-for="(item, i) in purifyImageList"
                :key="i"
              ></image>
            </view>
          </u-form-item>
          <u-form-item label="排风机现场清洗照片" border="none">
            <view
              class="photo-class"
              :class="fenImageList.length <= 2 ? 'photoAfter' : ''"
            >
              <image
                :src="item"
                v-for="(item, i) in fenImageList"
                :key="i"
              ></image>
            </view>
          </u-form-item>
          <u-form-item
            label="烟道机现场清洗照片"
            border="none"
            v-if="scale != 1"
          >
            <view
              class="photo-class"
              :class="smokeImageList.length <= 2 ? 'photoAfter' : ''"
            >
              <image
                :src="item"
                v-for="(item, i) in smokeImageList"
                :key="i"
              ></image>
            </view>
          </u-form-item>
        </u-form>
      </view>
    </view>
  </view>
</template>

<script>
import { imagesPathList } from "@/api/api.js";
import {
  Toast,
  navBack,
  handleClickRouter,
  formatters,
  dayTurnTime,
} from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      options: {},
      form: {},
      errorType: ["none"],
      imgPrefix: uni.getStorageSync("imgPrefix"),
      scale: "", // 餐厅大小
      purifyImageList: [],
      fenImageList: [],
      smokeImageList: [],
    };
  },
  onLoad(options) {
    this.form = JSON.parse(decodeURIComponent(options.data));
    this.form.cleanTime = formatters(this.form.cleanTime, "YY/MM/DD");
    this.scale = this.form.restaurantScale;

    this.getDetail();
  },
  methods: {
    handleClickRouter,
    navBack,
    getDetail() {
      if (this.scale != 1) {
        imagesPathList({ bizId: this.form.id, bizType: 1 }).then((res) => {
          if (res.code == 200 && res.result.length) {
            for (let v of res.result) {
              this.purifyImageList.push(this.imgPrefix + v.path);
            }
          }
        });

        imagesPathList({ bizId: this.form.id, bizType: 2 }).then((res) => {
          if (res.code == 200 && res.result.length) {
            for (let v of res.result) {
              this.smokeImageList.push(this.imgPrefix + v.path);
            }
          }
        });
      }

      imagesPathList({ bizId: this.form.id, bizType: 3 }).then((res) => {
        if (res.code == 200 && res.result.length) {
          for (let v of res.result) {
            this.fenImageList.push(this.imgPrefix + v.path);
          }
        }
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.rinseDetail {
  flex: 1;
  background-color: #f3f3f3;

  .wrapper {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;
      // height: calc(100vh - 60rpx);

      .conView {
        font-size: 28rpx;
      }
    }

    .photo-class {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;

      image {
        margin-bottom: 15rpx;
        width: 200rpx;
        height: 180rpx;
      }
    }

    .photoAfter::after {
      content: "";
      width: 200rpx;
    }
  }
}
</style>
